<template>
  <div class="left-chart-1">
    <div class="lc1-header">学院成果数量</div>
   <!-- <div class="lc1-details">学院成果总数<span>430</span></div>-->
    <dv-capsule-chart class="lc1-chart" :config="config" />
    <dv-decoration-2 style="height:10px;" />
  </div>
</template>

<script>
  import { topfive } from "@/api/module/gs/dashuju";

  export default {
  name: 'LeftChart1',
  data () {
    return {
      config: {

        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        unit: '个',

      },
      firstname:0,
      firstvalue:0,

      twoname:0,
      twovalue:0,

      threename:0,
      threevalue:0,

      fourname:0,
      fourvalue:0,

      fivename:0,
      fivevalue:0,
    }
  },
    created() {
      this.getCount();
      this.$watch(
        () => [this.firstname, this.firstvalue, this.twoname,this.twovalue],
        () => {
          this.createData();
        }
      );
    },
    methods: {
      /** 查询成果总数 */
      getCount() {
        this.loading = true;
        topfive(this.queryParams).then(response => {
          this.firstname=Object.keys(response)[0];
          this.firstvalue=Object.values(response)[0];

          this.twoname=Object.keys(response)[1];
          this.twovalue=Object.values(response)[1];

          this.threename=Object.keys(response)[2];
          this.threevalue=Object.values(response)[2];

          this.fourname=Object.keys(response)[3];
          this.fourvalue=Object.values(response)[3];

          this.fivename=Object.keys(response)[4];
          this.fivevalue=Object.values(response)[4];
        });
      },

      createData () {
        const { randomExtend } = this

        this.config = {
          data: [
            {
              name: this.firstname,
              value: this.firstvalue
            },
            {
              name:  this.twoname,
              value: this.twovalue
            },
            {
              name:  this.threename,
              value: this.threevalue
            },
            {
              name: this.fourname,
              value: this.fourvalue
            },
            {
              name: this.fivename,
              value: this.fivevalue
            }
          ],
        }
      },


    }
}
</script>

<style lang="less">
.left-chart-1 {
  width: 100%;
  height: 37%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;

  .lc1-header {
    text-align: center;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    margin-bottom: 20px;
  }
  .lc1-details {
    height: 50px;
    font-size: 16px;
    display: flex;
    align-items: center;
    text-indent: 20px;

    span {
      color: #096dd9;
      font-weight: bold;
      font-size: 35px;
      margin-left: 20px;
    }
  }

  .lc1-chart {
    flex: 1;
  }
}
</style>
